import * as echarts from 'echarts/core'
//  基础折线图
export const basicPieOptions = {
  title: {},
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '0%'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

//  圆角环形图
export const DoughnutPieOptions = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '15%',
    top: '3%'
  },
  legend: {
    top: '0%'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    }
  ]
}

//  环形图
export const annularPieOptions = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '3%',
    top: '3%',
    containLabel: true
  },
  legend: {
    top: '0%'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    }
  ]
}

let trafficWay: any = [
  {
    color: 'yellow',
    name: '不符合Ⅰ',
    value: 20
  },
  {
    color: 'green',
    name: '不符合Ⅱ',
    value: 40
  },
  {
    color: 'blue',
    name: '不符合Ⅲ',
    value: 60
  }
]

let data = []
let color = ['#f5e941', '#04c673', '#0ea4ff']
for (let i = 0; i < trafficWay.length; i++) {
  data.push(
    {
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    },
    {
      value: 2,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    }
  )
}

//  饼图
export const pieOption = {
  backgroundColor: '#021124',
  color: color,
  tooltip: {
    trigger: 'item'
  },
  // title: [
  //   {
  //     text: '4',
  //     top: '50%',
  //     left: '50%',
  //     padding: [-15, 0, 0, -15],
  //     textStyle: {
  //       color: '#fff',
  //       fontSize: 30,
  //       fontWeight: 'bold'
  //     }
  //   },
  //   {
  //     text: '总计',
  //     top: '50%',
  //     left: '50%',
  //     padding: [15, 0, 0, -20],
  //     textStyle: {
  //       color: '#fff',
  //       fontSize: 18,
  //       fontWeight: '400'
  //     }
  //   }
  // ],
  legend: {
    icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
    right: '30%',
    top: '28%',
    width: '20%',
    itemWidth: 10,
    orient: 'horizontal',
    formatter: (name: any) => {
      const item = trafficWay.find((i: any) => {
        return i.name === name
      })
      return '{name|' + name + '}' + '{' + item?.color + '|' + item?.value + '个}'
    },
    textStyle: {
      color: '#D8DDE3',
      rich: {
        name: {
          fontSize: 14,
          color: '#D8DDE3'
        },
        yellow: {
          padding: [0, 0, 0, 10],
          color: '#fff573',
          fontSize: 16,
          fontWeight: 'bold'
        },
        green: {
          padding: [0, 0, 0, 10],
          color: '#04c673',
          fontSize: 16,
          fontWeight: 'bold'
        },
        blue: {
          padding: [0, 0, 0, 10],
          color: '#0faeff',
          fontSize: 16,
          fontWeight: 'bold'
        }
      }
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: [87, 80],
      data: data,
      label: {
        show: false
      }
    }
  ]
}

let result = {
  total: 17289,
  value: 14638,
  color: '#01EAFF',
  rate: 0
}
result.rate = Number((result.value / result.total).toFixed(4))
let echartData = [
  {
    name: '数量',
    value: result.value,
    itemStyle: {
      normal: {
        color: result.color
      }
    }
  },
  {
    name: '剩下',
    value: result.total - result.value,
    itemStyle: {
      normal: {
        color: 'rgba(31, 110, 255, 0)'
      }
    }
  }
]
let echartData2 = [
  {
    name: '数量',
    value: result.total - result.value,
    itemStyle: {
      normal: {
        color: 'rgba(31, 110, 255, .4)'
      }
    }
  },
  {
    name: '剩下',
    value: result.value,
    itemStyle: {
      normal: {
        color: 'rgba(31, 110, 255, 0)'
      }
    }
  }
]

// 比例图
export const proportionPieOptions = {
  backgroundColor: '#0F141B',
  title: [
    {
      text: '总数',
      x: 'center',
      top: '42%',
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '100'
      }
    },
    {
      text: '4,290',
      x: 'center',
      top: '50%',
      textStyle: {
        fontSize: 22,
        color: '#00f0ff',
        foontWeight: '500'
      }
    }
  ],
  polar: {
    radius: ['44%', '50%'],
    center: ['50%', '50%']
  },
  angleAxis: {
    max: 100,
    show: false
  },
  radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      type: 'pie',
      startAngle: 90,
      radius: ['60%', '80%'],
      center: ['50%', '50%'],
      data: echartData,
      hoverAnimation: false,
      label: {
        show: false
      }
    },
    {
      type: 'pie',
      startAngle: 90 + (1 - result.rate) * 360,
      radius: ['62%', '77%'],
      center: ['50%', '50%'],
      data: echartData2,
      hoverAnimation: false,
      label: {
        show: false
      }
    },
    {
      name: '',
      type: 'pie',
      startAngle: 90,
      radius: '45%',
      animation: false,
      hoverAnimation: false,
      center: ['50%', '50%'],
      itemStyle: {
        normal: {
          labelLine: {
            show: false
          },
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 1,
              color: 'rgba(50,171,241, 1)'
            },
            {
              offset: 0,
              color: 'rgba(55,70,130, 0)'
            }
          ]),
          shadowBlur: 10
        }
      },
      data: [
        {
          value: 100
        }
      ]
    }
  ]
}

let value = 60
// qwl-仪表盘
export const qwlPieChartOption = {
  backgroundColor: 'rgb(4,31,62)',
  title: {
    text: '{a|' + value + '}{c|%}',
    x: 'center',
    y: 'center',
    textStyle: {
      rich: {
        a: {
          fontSize: 30,
          color: '#fff'
        },

        c: {
          fontSize: 30,
          color: '#ffffff'
        }
      }
    }
  },
  legend: {
    show: false
  },
  series: [
    {
      name: '外层细线',
      z: 0,
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params: any, api: any) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
            startAngle: 0,
            endAngle: 360
          },
          style: {
            stroke: 'rgb(105,206,195)',
            fill: 'transparent',
            lineWidth: 0.5
          },
          silent: true
        }
      },
      data: [0]
    },
    {
      name: name,
      type: 'pie',
      radius: ['65%', '75%'],
      silent: true,
      // clockwise: false,
      startAngle: 90,
      z: 1,
      zlevel: 0,
      label: {
        normal: {
          position: 'center'
        }
      },
      data: [
        {
          value: value,
          name: '',
          itemStyle: {
            normal: {
              color: 'rgb(105,206,195)'
            }
          }
        },
        {
          value: 100 - value,
          name: '',
          label: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      name: '刻度间隔',
      z: 2,
      type: 'gauge',
      radius: '83%',
      center: ['50%', '50%'],
      startAngle: 0,
      endAngle: 359.9,
      splitNumber: 40,
      hoverAnimation: true,
      axisTick: {
        show: true,
        splitNumber: 1,
        length: '14%',
        lineStyle: {
          width: 2,
          color: 'rgb(4,31,62)'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          opacity: 0
        }
      },
      detail: {
        show: false
      },
      data: [100]
    },
    {
      name: '',
      type: 'pie',
      startAngle: 90,
      radius: '64%',
      hoverAnimation: false,
      center: ['50%', '50%'],
      itemStyle: {
        normal: {
          labelLine: {
            show: false
          },
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 1,
              color: 'rgba(55,70,130, 1)'
            },
            {
              offset: 0,
              color: 'rgba(55,70,130, 0)'
            }
          ]),
          shadowBlur: 10
          // shadowColor: 'rgba(55,70,130, 1)'
        }
      },
      data: [
        {
          value: 100
        }
      ]
    }
  ]
}
